<template>
	<!-- 已登录 -->
	<van-row v-if="user.isLogin" class="user-info">
		<van-image v-if="user.avatar" round width="100" height="100" src="{{ user.avatar }}" />
		<van-image v-else round width="100" height="100" :src="avatar_default" />
		<span class="user-info-name">{{ user.username }}</span>
		<van-button plain type="danger" size="mini" @click="onLogout">退出</van-button>
	</van-row>
	<!-- 未登录 -->
	<van-row v-else class="user-info">
		<van-image round width="100" height="100" :src="avatar_default" />
		<router-link :to="{ name: 'login' }">
			<span class="user-info-name">登录&nbsp;&nbsp;|</span>
		</router-link>
		<router-link :to="{ name: 'register' }">
			<span class="user-info-name">注册</span>
		</router-link>
	</van-row>
	<van-row class="user-links">
		<van-col span="6">
			<van-icon name="pending-payment" />
			待付款
		</van-col>
		<van-col span="6">
			<van-icon name="records" :badge="user.isLogin ? '7' : ''" />
			待收货
		</van-col>
		<van-col span="6">
			<van-icon name="tosend" :badge="user.isLogin ? '40' : ''" />
			待评价
		</van-col>
		<van-col span="6">
			<van-icon name="logistics" :badge="user.isLogin ? '1' : ''" />
			退换/售后
		</van-col>
	</van-row>
	<van-cell-group class="user-group my-title">
		<van-cell icon="records" title="全部订单" is-link />
	</van-cell-group>
	<van-cell-group class="my-title">
		<van-cell icon="points" title="我的积分" is-link />
		<van-cell icon="gold-coin-o" title="我的优惠券" is-link />
		<van-cell icon="gift-o" title="我的红包" is-link />
	</van-cell-group>
</template>

<script setup>
	import avatar_default from '../assets/images/avatar_default.png'
	import router from '../router/index'
	import useToken from '../stores/token'
	import useUser from '../stores/user'
	import { showToast } from 'vant'
	
	const { removeToken } = useToken()
	const { user, removeUser } = useUser()

	// 退出登录
	const onLogout = async () => {
		removeToken()
		removeUser()
		router.push({
			name: 'user'
		})
		showToast({
			message: '退出成功',
			type: 'success'
		})
	}
</script>

<style lang="less" scoped>
	.user-info {
		padding: 15px;
		background: url(../assets/images/user_head_bg.png) no-repeat;
		background-size: 100%;
	}

	.user-info button {
		margin: 40px 0 0 10px;
	}

	.user-info-name {
		display: inline-block;
		color: #fff;
		padding: 40px 0 0 10px;
		font-size: 20px;
	}

	:deep(.van-badge--top-right) {
		top: 4px;
		right: 35px;
		transform: translate(50%, -50%);
	}

	.user {
		&-group {
			margin-bottom: 15px;
		}

		&-links {
			padding: 15px 0;
			font-size: 12px;
			text-align: center;

			.van-icon {
				display: block;
				font-size: 24px;
			}
		}
	}
</style>